<template>
    <div  ref="contentList">
        <div style="padding:0px 0px 40px 0px;box-sizing:border-box;">
            <p class="content-list-name" v-for="typeList in typeLists" :key="typeList._system_record_entry_id" 
                @click="sendParams(typeList.maitKey,typeList.miniWallkey,typeList.title)"
                :class="typeTitle==typeList.title?'active-list':''"
            >{{typeList.title}}</p>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        typeLists:{
            type:Array,
            required:true,
            default(){
                return []
            }
        }
    },
    data(){
        return{
            typeTitle:"正在流行"
        }
    },
    methods: {
        sendParams(arg1,arg2,arg3){
            this.$emit("update:key",arg1,arg2);
            this.typeTitle=arg3;
        }
    }
};
</script>
<style lang="less" scoped>
.content-list-name {
    text-align: center;
    margin: 0.3rem 0rem 0.3rem 0rem;
    // padding:40px 0px;
    width:100%;
    height:80px;
    line-height:80px;
    font-weight: bold;
    box-sizing: border-box;
    // padding-left:10px;
    &:first-child {
        // border-left: 0.1rem solid @pink;
        margin-top:0px;
    }
}
.active-list{
    border-left:10px solid @pink;
    background-color:@white;
    padding-right:10px;
}
</style>